<template>
  <div class="list-container">
    <div
      class="songList-info"
      v-for="(item, index) in songList"
      :key="index"
      @click="clickItem(item)"
    >
      <a-avatar
        shape="square"
        :size="64"
        :src="getPic(item.pic)"
      >
        <template #icon v-if="!item.pic"><UserOutlined /></template>
      </a-avatar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import { getAllSongList } from "@/api/api.ts";

import type {songListStateType,songListType} from "@/types/pageTypes/songList.ts";
const songList = ref<songListType[] | []>([]);
const compState: Ref<songListStateType | null | undefined> = defineModel();
const getSongList = () => {
  getAllSongList().then((result) => {
    songList.value = result.data;
  });
};
const getPic = (pic: string): string => {
  return import.meta.env.VITE_APP_BASE_SERVER + pic;
};

const clickItem = (item: songListType) => {
  if (compState.value) {
    compState.value.page = "songs" as "songs";
    compState.value.songList = item;
  }
};
onMounted(() => {
  getSongList();
});
</script>

<style scoped lang="less">
.list-container {
  height:100%;
  padding: 10px;
  //   background-color: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  .songList-info {
       margin:0 10px 10px 10px;
       cursor:pointer;
  }
}
</style>
